<!--<div nz-row nzJustify="center" style="background-color: #1890ff;padding:20px 0 20px 20px">-->

<!--  <nz-avatar [nzSize]="50" nzIcon="user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>-->
<!--  <button nz-button (click)="test()">点我</button>-->
<!--</div>-->

<form name="form" method="post" action="javascript:;" hidden>
  <input type="file" name="fileInput" id="fileInput" style="display: none;" multiple accept="image/png">
</form>

<div class="info-content">
  <nz-list nzGrid *ngIf="authService.userInfo">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-list-item>
          <nz-card nzTitle="头像">
            <div style="text-align: center;">

              <nz-spin nzTip="Loading..." [nzSpinning]="uploading">
                <nz-upload
                  class="avatar-uploader"
                  nzAction="http://localhost:8003/upload/avatar"
                  nzName="avatar"
                  nzListType="picture-card"
                  [nzHeaders]="getHeaders()"
                  [nzShowUploadList]="false"
                  [nzBeforeUpload]="beforeUpload"
                  (nzChange)="handleChange($event)"
                >
                  <ng-container style="width: 400px">
  <!--                  <i class="upload-icon" nz-icon [nzType]="uploading ? 'loading' : 'plus'"></i>-->
  <!--                  <div class="ant-upload-text">Upload</div>-->
                    <img [src]="authService.avatarUrl" style="width: 100%" alt="未设置">
                  </ng-container>
                </nz-upload>
              </nz-spin>
              </div>
          </nz-card>
        </nz-list-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-list-item>
          <nz-card nzTitle="用户信息">
            <div>
              <div class="box-line">
                用户id：{{authService.userInfo.userId}}
              </div>
              <div class="box-line">
                性别：
                <nz-radio-group [(ngModel)]="custom.sex" (ngModelChange)="sexChangeClick()">
                  <label nz-radio nzValue="保密">保密</label>
                  <label nz-radio nzValue="男">男</label>
                  <label nz-radio nzValue="女">女</label>
                </nz-radio-group>
              </div>
              <div class="box-line">
                生日：
                <input type="date" class="measureDate" placeholder="请选择日期"
                       [(ngModel)]="custom.birthday" (focusout)="birthdayChangeClick()">
              </div>
              <div class="box-line">
                用户名：{{authService.userInfo.username}}
                <a (click)="username.edit=true"><i nz-icon nzType="edit" nzTheme="twotone"></i></a>
              </div>

              <div *ngIf="username.edit">
                <nz-alert *ngIf="username.error" class="box-line" nzType="error" [nzMessage]="username.error" nzShowIcon></nz-alert>
                <div class="box-line" style="margin-top: 10px">
                  请输入新用户名：
                  <input nz-input [(ngModel)]="username.value" (focusout)="checkUsername()"/>
                </div>
                <div class="box-line" style="float: right">
                  <button nz-button (click)="username.edit=false">取消</button>
                  <button nz-button (click)="usernameConfirm()" nzType="primary">保存</button>
                </div>
              </div>
            </div>
          </nz-card>
        </nz-list-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12" style="max-width: 500px">
        <nz-list-item>
          <nz-card nzTitle="邮箱" [nzExtra]="emailTemplate">
            <div>
              <nz-tag [nzColor]="'purple'">{{authService.userInfo.email}}</nz-tag>
              <div *ngIf="email.edit">
                <nz-alert *ngIf="email.error" class="box-line" nzType="error" [nzMessage]="email.error" nzShowIcon></nz-alert>
                <div *ngIf="!email.mailToken">
                  <div class="box-line">
                    <nz-tag nzColor="red"> 注意：修改邮箱需要验证旧邮箱！</nz-tag>
                  </div>
                  <button class="box-line" [disabled]="email.count > 0" type="button" nz-button
                          nzSize="default" (click)="getEmailCaptcha()" nzBlock [nzLoading]="email.captchaLoading">
                    {{ email.count ? email.count + 's' : ('获取验证码') }}
                  </button>
                  <div class="box-line">
                    验证码：
                    <input nz-input style="width: 180px;margin-right: 10px" placeholder="请输入旧邮箱的验证码" [(ngModel)]="email.captcha"/>
                  </div>
                  <div class="box-line" style="float: right">
                    <button nz-button (click)="email.edit=false">取消</button>
                    <button nz-button (click)="oldMailConfirm()" nzType="primary"
                            [disabled]="email.captcha==''"
                            [nzLoading]="email.subLoading">确认</button>
                  </div>
                </div>
                <div *ngIf="email.mailToken">
                  <div class="box-line">
                    新邮箱：
                    <input type="mail" nz-input [(ngModel)]="email.email"
                           style="max-width: 250px;margin-right: 10px" placeholder="请输入新邮箱"/>
                  </div>
                  <div class="box-line">
                    验证码：
                    <input type="text" nz-input style="width: 120px;margin-right: 10px" placeholder="请输入验证码"
                           [(ngModel)]="email.captcha"/>
                    <button type="button" style="width: fit-content" nz-button nzSize="default"
                            (click)="getNewEmailCaptcha()" [disabled]="email.count > 0" nzBlock
                            [nzLoading]="email.captchaLoading">
                      {{ email.count ? email.count + 's' : ('发送验证码') }}
                    </button>
                  </div>
                  <div class="box-line" style="float: right">
                    <button nz-button (click)="email.edit=false">取消</button>
                    <button [disabled]="email.captcha==''||email.email==''"
                            (click)="newMailConfirm()"
                            nz-button  nzType="primary" [nzLoading]="email.subLoading">保存</button>
                  </div>
                </div>
              </div>
            </div>
          </nz-card>
          <ng-template #emailTemplate>
            <a *ngIf="!email.edit" (click)="email.edit=true">修改</a>
            <a *ngIf="email.edit" (click)="email.edit=false">取消</a>
          </ng-template>
        </nz-list-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-list-item>
          <nz-card nzTitle="密码" [nzExtra]="passwdTemplate">
            <div>
              <nz-tag [nzColor]="'purple'">******</nz-tag>
              <div class="pass-edit-box" *ngIf="passwd.edit">
                <form nz-form [formGroup]="passwdFrom" (ngSubmit)="passwdSubmit()" role="form">
                  <nz-form-item>
                    <nz-form-control [nzErrorTip]="confirmErrorTip">
                      <nz-input-group nzSize="default" nzPrefixIcon="lock">
                        <input nz-input type="password" formControlName="currentPassword" placeholder="旧密码" autocomplete/>
                      </nz-input-group>
                      <ng-template #confirmErrorTip let-i>
                        <ng-container *ngIf="i.errors?.required">请输入当前密码！</ng-container>
                        <ng-container *ngIf="i.errors?.msg">两次输入的密码不匹配!</ng-container>
                      </ng-template>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <nz-form-control [nzErrorTip]="'请输入密码！'">
                      <nz-input-group
                        nzPrefixIcon="lock"
                        nzSize="default"
                        nz-popover
                        nzPopoverPlacement="right"
                        nzPopoverTrigger="focus"
                        nzPopoverOverlayClassName="register-password-cdk"
                        [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
                        [nzPopoverContent]="pwdCdkTpl"
                      >
                        <input nz-input type="password" formControlName="password" placeholder="新密码" autocomplete/>
                      </nz-input-group>
                      <ng-template #pwdCdkTpl>
                        <div style="padding: 4px 0">
                          <ng-container [ngSwitch]="passwd.status">
                            <div *ngSwitchCase="'ok'" class="success">强度：强</div>
                            <div *ngSwitchCase="'pass'" class="warning">强度：中</div>
                            <div *ngSwitchDefault class="error">强度：太短</div>
                          </ng-container>
                          <div class="progress-{{ passwd.status }}">
                            <nz-progress
                              [nzPercent]="passwd.progress"
                              [nzStatus]="passwordProgressMap[passwd.status]"
                              [nzStrokeWidth]="6"
                              [nzShowInfo]="false"
                            ></nz-progress>
                          </div>
                          <p class="mt-sm">请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>
                        </div>
                      </ng-template>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <nz-form-control [nzErrorTip]="confirmErrorTip">
                      <nz-input-group nzSize="default" nzPrefixIcon="lock">
                        <input nz-input type="password" formControlName="confirm" placeholder="确认密码" autocomplete/>
                      </nz-input-group>
                      <ng-template #confirmErrorTip let-i>
                        <ng-container *ngIf="i.errors?.required">请确认新密码！</ng-container>
                        <ng-container *ngIf="i.errors?.msg">两次输入的密码不匹配!</ng-container>
                      </ng-template>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <div class="pass-bt-box">
                      <button nz-button (click)="passwd.edit=false">取消</button>
                      <button nz-button type="submit" nzType="primary">确认</button>
                    </div>
                  </nz-form-item>
                </form>
              </div>
            </div>
          </nz-card>
          <ng-template #passwdTemplate>
            <a *ngIf="!passwd.edit" (click)="passwd.edit=true">修改</a>
            <a *ngIf="passwd.edit" (click)="passwd.edit=false">取消</a>
          </ng-template>
        </nz-list-item>
      </div>
    </div>
  </nz-list>
</div>
